<template>
    <div>

        <div class="imageWrapper" ref="imageWrapper">

            <slot>
                <div class="posterPage" :class="{volunteer: type=='volunteer'}" id="imgWrap">
                    <div class="logo-div"><img class="logo" :src="logo" alt=""></div>

                    <img class="banner" :src="banner" alt="">
                    <div class="poster_box">
                        <img class="poster_box-img" :src="posterInfo.img" alt="">
                        <img src="@/assets/images/badge.png" class="badge"></img>
                        <div class="intro" v-if="type=='assit'">
                            <p class="p1 text-align-last">助力农民工</p>
                            <p class="p2 text-align-last">回家路</p>
                            <p class="p1">我是第</p>
                            <p class="p4 fw-bb">{{num?num:666}}</p>
                            <p class="p5">位助力者</p>
                            <div class="p-line"></div>
                        </div>
                        <div class="intro" v-if="type=='volunteer'">
                            <p class="p1 text-align-last">助力农民工</p>
                            <p class="p2 text-align-last">回 家 路</p>
                            <p class="p1">加入</p>
                            <p class="p2 fw-bb text-align-last">志 愿 者</p>
                            <!--                            <p class="p4">{{num?num:666}}</p>-->
                            <p class="p5 active">行列</p>
                            <div class="p-line active"></div>
                        </div>
                        <div class="qrcode">
                            <div class="qrcode-txt" v-if="type=='assit'">
                                <img src="@/assets/images/sbewm.png">
                                <img src="@/assets/images/sbewm.png">
                            </div>
                            <div class="qrcode-txt" v-if="type=='volunteer'">
                                <img src="@/assets/images/sbewm1.png">
                                <img src="@/assets/images/sbewm1.png">
                            </div>
                            <img class="qrcode-img" src="@/assets/images/assitorQRcode.png" alt="">
                        </div>
                        <div class="word">
                            <img src="@/assets/images/jiantou.png" alt="" class="jiantou" v-if="type=='assit'">
                            <img src="@/assets/images/jiantou1.png" alt="" class="jiantou" v-if="type=='volunteer'">
                            <p>{{posterInfo.desc}}</p>
                        </div>
                        <div class="signBox"><img :src="baseUrl+posterInfo.signimg" alt=""></div>
                        <div class="signBox"><img :src="baseUrl+posterInfo.signimg" alt=""></div>
                        <div class="signBox"><img :src="baseUrl+posterInfo.signimg" alt=""></div>
                        <div class="signBox"><img :src="baseUrl+posterInfo.signimg" alt=""></div>
                    </div>
                </div>
            </slot>

        </div>

        <SharePage ref="showPage"/>
        <div class="img-wrap" v-if="dataURL">
            <img class="real_pic" :src="dataURL" width="100%"/>
            <div>
                <span>长按可保存图片和识别图中二维码</span>
            </div>

        </div>

        <div class="set_btn">
            <a v-if="set_btn" href="javascript:void(0);" @click="shareFn">分 享 海 报</a>
            <!-- <a href="javascript:void(0);" @click="sharePoster">分 享 海 报</a> -->
            <a v-if="set_btn" href="javascript:void(0);" @click="remake">重 新 制 作</a>
            <p v-if="!set_btn">请长按保存图片</p>
        </div>
    </div>
</template>
<script>
  import logo from "@/assets/images/logoTop.png";
  import banner from "@/assets/images/poster_head.png";
  import {
    mapActions
  } from 'vuex';
  import config from '@/config'
  import SharePage from '@/components/SharePage'

  // import html2canvas from '@/assets/js/html2canvas.min.js';
  import html2canvas from 'html2canvas'
  import axios from 'axios'

  export default {
    data() {
      return {
        logo,
        banner,
        posterInfo: {},
        baseUrl: config.baseUrl,
        type: '',
        num: '',
        dataURL: '',
        set_btn: true
      };
    },
    mounted() {
      this.type = this.$route.query.type;
      this.num = this.$route.query.num;
      this.getInfo(this.type);
    },
    components: {
      SharePage
    },
    methods: {
      savePoster(imgurl, type) {
        axios.post('/api/user/savePoster', {imgurl, type})
          .then(function () {
          }).catch(() => {
        })
      },
      shareFn() {
        this.set_btn = false
        this.toImage()
      },
      //生成海报图
      toImage() {
        if (this.dataURL) {
          return
        }
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        setTimeout(() => {
          html2canvas(this.$refs.imageWrapper, {
            backgroundColor: '#fff'
          }).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png");
            this.dataURL = dataURL;
            let type = 1
            if (this.type == 'volunteer') {
              type = 2
            }
            console.log(type)
            this.savePoster(dataURL, type)
          });
        }, 400)
      },

      ...mapActions({
        getAssitorInfo: 'fishH5/getAssitorInfo',
        getVolunteerInfo: 'fishH5/getVolunteerInfo'
      }),
      sharePoster() {
        this.$refs.showPage.show();
      },
      lalala() {
        const self = this
        const img = new Image();
        img.src = this.baseUrl + this.posterInfo.img
        img.onload = function () {
          self.$nextTick(() => {
            self.toImage()
          })
        }
        img.onerror = function () {
          self.$nextTick(() => {
            self.toImage()
          })
        }
      },
      remake() {
        this.$router.replace({
          name: 'assitorForm',
          query: {
            type: this.$route.query.type
          }
        })
      },
      getInfo(type) {
        if (type == 'assit') {
          this.getAssitorInfo({
            callback: (res) => {
              this.posterInfo = res.data;
              this.lalala()
            }
          })
        } else if (type == 'volunteer') {
          this.getVolunteerInfo({
            callback: (res) => {
              this.posterInfo = res.data;
              this.lalala()
            }
          })
        }
      }
    }
  };
</script>

<style scoped>
    .text-align-last {
        text-align: justify !important;
        width: 1.62rem;

    }

    .text-align-last:after {
        display: inline-block;
        width: 100%;
        height: 1px;
        content: '';
        line-height: 1;
    }

    .img-wrap {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0;
        z-index: 2000;
    }

    .img-wrap > div {
        text-align: center;
        position: fixed;
        bottom: 1rem;
        width: 100%;
        left: 0;
        z-index: 2;
    }

    .img-wrap span {
        font-size: 0.2rem;
        background: rgba(0, 0, 0, .8);
        color: #ababab;
        padding: 0.06rem 0.2rem;
        display: inline-block;
        border-radius: 1rem;
    }

    .posterPage {
        position: relative;
        width: 7.5rem;
        height: 12rem;
        /* padding-top: 4.08rem; */
        text-align: center;
    }

    .logo-div {
        text-align: right;
        padding: 0.2rem 0.2rem 0.1rem 0;
    }

    .posterPage .logo {
        width: 2.86rem;
        height: 0.86rem;
        /* position: absolute; */
        top: 0.21rem;
        right: 0.16rem;
        /* 		display: block;
        margin: 0 auto; */
    }

    .posterPage .banner {
        width: 4.54rem;
        height: 2.93rem;
        /* position: absolute; */
        top: 1.28rem;
        left: 1.48rem;
        z-index: 10;
        display: block;
        margin: 0 auto;
    }

    .poster_box {
        width: 6.65rem;
        height: 7.82rem;
        background-color: grey;
        margin-left: 0.42rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }


    .poster_box .badge {
        width: 1.36rem;
        height: 1.36rem;
        /*background-image: url(~@/assets/images/badge.png);*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -0.4rem;
        right: -0.29rem;
    }

    .poster_box .intro {
        color: #f5a100;
        font-weight: bold;
        /*width: 1.8rem;*/
        height: 2.43rem;
        position: absolute;
        top: 3.17rem;
        left: 0.22rem;

    }

    .p-line {
        width: 1.62rem;
        border-bottom: 2px solid #f5a100;
    }

    .p-line.active {
        border-bottom-color: red;
    }

    .poster_box .p1 {
        font-size: 0.24rem;
        line-height: 0.42rem;
        height: 0.42rem;
    }

    .poster_box .p2 {
        font-size: 0.4rem;
        height: 0.52rem;
        line-height:0.52rem;
    }

    .fw-bb {
        font-weight: bolder !important;
    }

    .poster_box .p4 {
        font-size: 0.42rem;
    }

    .poster_box .p5 {
        font-size: 0.24rem;
        text-align: right;
    }

    poster_box .p5.active {
        text-align: right;
    }

    .poster_box .qrcode {
        width: 1.6rem;
        font-size: 0.13rem;
        color: #f5a100;
        position: absolute;
        left: 0.22rem;
        bottom: 0.2rem;
    }

    .poster_box .qrcode p {
        line-height: 1;
    }

    .poster_box .qrcode .qrcode-img {
        width: 1.6rem;
        margin-top: 0.1rem;
        height: 1.6rem;
    }


    .poster_box .word {
        width: .9rem;
        position: absolute;
        top: 1.2rem;
        right: .2rem;
        color: #f5a100;
    }

    .poster_box .word > div {
        font-size: .24rem;
        text-align: right;
        line-height: .24rem;
        margin-bottom: .2rem;
    }

    .poster_box .word p {
        /*width: 0.9rem;*/
        height: 2.98rem;
        word-break: break-word;
        font-size: 0.24rem;
        writing-mode: vertical-rl;
        line-height: 0.3rem;
        letter-spacing: 0.04rem;
        margin-left: auto;
        writing-mode: tb-rl;
        text-align: left;
    }

    .poster_box .signBox {
        width: 2.2rem;
        height: 0.855rem;
        position: absolute;
        bottom: .76rem;
        right: .28rem;
    }

    .poster_box .signBox img {
        width: 100%;
        height: 100%;
    }

    .set_btn {
        text-align: center;
        height: .53rem;
        margin-top: .37rem;
        margin-bottom: .42rem;
        position: relative;
        z-index: 3000;
    }

    .set_btn a {
        display: inline-block;
        width: 1.89rem;
        height: .53rem;
        line-height: .53rem;
        background-color: #f5a100;
        color: #fff;
        font-size: .24rem;
        font-weight: bold;
        text-align: center;
        border-radius: .04rem;
        vertical-align: top;
    }

    .posterPage.volunteer .intro,
    .posterPage.volunteer .qrcode,
    .posterPage.volunteer .word {
        color: red;
    }

    .intro p {
        text-align: left;
    }

    .posterPage.volunteer.set_btn a {
        background-color: red;
    }

    .qrcode-txt {
        width: 1.57rem;
        height: 0.17rem;
        display: block;


    }

    .qrcode-txt img {

        display: block;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .jiantou {
        width: 0.2rem;
        height: 0.16rem;
        display: block;
        margin-left: auto;
        margin-bottom: 0.1rem;
    }

    .poster_box-img {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: auto;
    }
</style>
